Skip to content

style: improve landing page UI#18

Open
biraj21 wants to merge 1 commit intomainfrom
biraj/improve-landing-page-ui
Open

style: improve landing page UI#18
biraj21 wants to merge 1 commit intomainfrom
biraj/improve-landing-page-ui

Conversation

@biraj21
Copy link

@biraj21 biraj21 commented Feb 4, 2026

No description provided.

@greptile-apps
Copy link

greptile-apps bot commented Feb 4, 2026

Greptile Overview

Greptile Summary

This PR modernizes the landing page UI with a comprehensive visual redesign. The changes include a vibrant particle animation background with glowing effects, redesigned hero section with custom GitHub stat badges, modernized download buttons with inline SVGs, and a completely restructured footer with grid layout and social links. The typography has been updated to use the Lexend font family, and the color scheme now features electric blues and cyans throughout.

Key improvements:

  • Enhanced particle animation system with colorful gradients and glow effects
  • Custom GitHub buttons replacing external github-buttons library with live API data fetching
  • Modern, responsive footer with structured sections and improved visual hierarchy
  • Updated announcement banner copy for better product positioning
  • Comprehensive SCSS modernization with improved hover states and transitions

Issues found:

  • Invalid CSS color concatenation in background.js (lines 27-28) that produces malformed color strings
  • Duplicate JSDoc @param in background.js (line 2-3)

Confidence Score: 4/5

  • Safe to merge after fixing the CSS color concatenation bug
  • The PR is well-implemented with comprehensive UI improvements, but contains a syntax error in the gradient color handling that will prevent transparency from working correctly. Once the hex color concatenation is fixed, the changes are safe to deploy.
  • client/lib/background.js requires attention for the invalid CSS color concatenation

Important Files Changed

Filename Overview
client/lib/background.js Enhanced particle animation with glowing effects and vibrant color palette; has invalid CSS color concatenation that needs fixing
client/components/announcementBanner/index.js Updated banner copy to emphasize product positioning; no issues found
client/pages/home/index.js Replaced external GitHub buttons with custom implementation fetching live stats; improved download button UI with inline SVGs
client/main.view.js Redesigned footer with modern grid layout, social links, and structured content sections
client/main.scss Comprehensive footer redesign with modern styling, responsive grid layout, and improved visual hierarchy
client/pages/home/style.scss Major homepage redesign with new typography (Lexend font), modern button styles, enhanced animations, and improved responsive design

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant HomePage
    participant GitHubAPI
    participant PluginsAPI
    participant Background

    User->>Browser: Visit landing page
    Browser->>HomePage: Load home component
    HomePage->>Background: Initialize canvas animation
    Background-->>Browser: Render particle effects
    
    par Fetch GitHub Stats
        HomePage->>GitHubAPI: GET /repos/acode-foundation/acode
        GitHubAPI-->>HomePage: {stargazers_count, forks_count}
        HomePage->>Browser: Update stars & forks display
    and Fetch Plugin Data
        HomePage->>PluginsAPI: GET /api/plugins/count
        PluginsAPI-->>HomePage: {count}
        HomePage->>PluginsAPI: GET /api/plugins?limit=4&sort=downloads
        PluginsAPI-->>HomePage: [plugin list]
        HomePage->>Browser: Render featured plugins
    end
    
    HomePage->>Browser: Hide loading, display content
    
    alt GitHub API fails
        GitHubAPI-->>HomePage: Error
        HomePage->>Browser: Display fallback stats (1.2k+, 200+)
    end
    
    User->>Browser: Hover/interact with UI elements
    Browser->>Background: Continue animation loop
    Background-->>Browser: Update particles & connections
Loading

Copy link

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

6 files reviewed, 2 comments

Edit Code Review Agent Settings | Greptile

Comment on lines +27 to +28
gradient.addColorStop(0.5, `${this.color}40`); // Add transparency to hex
gradient.addColorStop(1, `${this.color}00`);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

string concatenation with hex colors doesn't create transparency properly - ${this.color}40 produces strings like #00d4ff40 which is invalid CSS

Suggested change
gradient.addColorStop(0.5, `${this.color}40`); // Add transparency to hex
gradient.addColorStop(1, `${this.color}00`);
gradient.addColorStop(0.5, `${this.color}66`); // 40% opacity in hex
gradient.addColorStop(1, `${this.color}00`);
Prompt To Fix With AI
This is a comment left during a code review.
Path: client/lib/background.js
Line: 27:28

Comment:
string concatenation with hex colors doesn't create transparency properly - `${this.color}40` produces strings like `#00d4ff40` which is invalid CSS

```suggestion
    gradient.addColorStop(0.5, `${this.color}66`); // 40% opacity in hex
    gradient.addColorStop(1, `${this.color}00`);
```

How can I resolve this? If you propose a fix, please make it concise.

@greptile-apps
Copy link

greptile-apps bot commented Feb 4, 2026

Additional Comments (1)

client/lib/background.js
duplicate @param for canvas in JSDoc

  /**
   * @param {HTMLCanvasElement} canvas
Prompt To Fix With AI
This is a comment left during a code review.
Path: client/lib/background.js
Line: 2:3

Comment:
duplicate `@param` for canvas in JSDoc

```suggestion
  /**
   * @param {HTMLCanvasElement} canvas
```

How can I resolve this? If you propose a fix, please make it concise.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant